<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>2.JS基础 | 纸飞机的旅行</title><meta name="author" content="GISer"><meta name="copyright" content="GISer"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="JS基础知识1.	javascript的typeof返回哪些数据类型   alert(typeof [1, 2]); &#x2F;&#x2F;object    alert(typeof &amp;#x27;leipeng&amp;#x27;); &#x2F;&#x2F;string    var i &#x3D; true;     alert(typeof i); &#x2F;&#x2F;boolean    alert(typeof 1); &#x2F;&#x2F;number    var a">
<meta property="og:type" content="article">
<meta property="og:title" content="2.JS基础">
<meta property="og:url" content="https://jhcgnb.cn/posts/fec612ee/index.html">
<meta property="og:site_name" content="纸飞机的旅行">
<meta property="og:description" content="JS基础知识1.	javascript的typeof返回哪些数据类型   alert(typeof [1, 2]); &#x2F;&#x2F;object    alert(typeof &amp;#x27;leipeng&amp;#x27;); &#x2F;&#x2F;string    var i &#x3D; true;     alert(typeof i); &#x2F;&#x2F;boolean    alert(typeof 1); &#x2F;&#x2F;number    var a">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png">
<meta property="article:published_time" content="2023-04-26T13:36:48.000Z">
<meta property="article:modified_time" content="2023-07-22T13:43:58.953Z">
<meta property="article:author" content="GISer">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png"><link rel="shortcut icon" href="/img/adaver.png"><link rel="canonical" href="https://jhcgnb.cn/posts/fec612ee/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//www.google-analytics.com" crossorigin=""/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="baidu-site-verification" content="codeva-Iy1bfAu5vL"/><meta name="google-site-verification" content="wN-6FUBZ4DJeo_lSZyCGmnnTBKG3n0H20plO_qsfTPM"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c6e8056e906ef79846cd727f753be936";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><script async="async" src="https://www.googletagmanager.com/gtag/js?id=5757554821"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '5757554821');
</script><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '2.JS基础',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-07-22 21:43:58'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/rss2.xml" title="纸飞机的旅行" type="application/rss+xml">
</head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/img/adaver.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">20</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">3</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/shuoshuo/"><i class="fa-fw fa fa-comments-o"></i><span> 分享</span></a></li><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png')"><nav id="nav"><span id="blog-info"><a href="/" title="纸飞机的旅行"><span class="site-name">纸飞机的旅行</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/shuoshuo/"><i class="fa-fw fa fa-comments-o"></i><span> 分享</span></a></li><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">2.JS基础</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-04-26T13:36:48.000Z" title="发表于 2023-04-26 21:36:48">2023-04-26</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-07-22T13:43:58.953Z" title="更新于 2023-07-22 21:43:58">2023-07-22</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E6%8A%80%E6%9C%AF/">技术</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>14分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="2.JS基础"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="JS基础知识"><a href="#JS基础知识" class="headerlink" title="JS基础知识"></a>JS基础知识</h1><h2 id="1-javascript的typeof返回哪些数据类型"><a href="#1-javascript的typeof返回哪些数据类型" class="headerlink" title="1.	javascript的typeof返回哪些数据类型"></a>1.	javascript的typeof返回哪些数据类型</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">   <span class="title function_">alert</span>(<span class="keyword">typeof</span> [<span class="number">1</span>, <span class="number">2</span>]); <span class="comment">//object</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="keyword">typeof</span> <span class="string">&#x27;leipeng&#x27;</span>); <span class="comment">//string</span></span><br><span class="line">    <span class="keyword">var</span> i = <span class="literal">true</span>; </span><br><span class="line">    <span class="title function_">alert</span>(<span class="keyword">typeof</span> i); <span class="comment">//boolean</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="keyword">typeof</span> <span class="number">1</span>); <span class="comment">//number</span></span><br><span class="line">    <span class="keyword">var</span> a; </span><br><span class="line">    <span class="title function_">alert</span>(<span class="keyword">typeof</span> a); <span class="comment">//undefined</span></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">a</span>(<span class="params"></span>)&#123;;&#125;;</span><br><span class="line"><span class="title function_">alert</span>(<span class="keyword">typeof</span> a) <span class="comment">//function</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="built_in">isNaN</span>  <span class="keyword">function</span></span><br><span class="line">检测数组的几种方式：</span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr);   es5</span><br><span class="line"><span class="title class_">Object</span>.<span class="property">toString</span>.<span class="title function_">call</span>([]) === ‘object <span class="title class_">Array</span>’</span><br><span class="line">arr <span class="keyword">instanceof</span> <span class="title class_">Array</span></span><br><span class="line">arr.<span class="property">constructor</span> === <span class="title class_">Array</span></span><br></pre></td></tr></table></figure>

<h2 id="2-例举3种强制类型转换和2种隐式类型转换"><a href="#2-例举3种强制类型转换和2种隐式类型转换" class="headerlink" title="2.	例举3种强制类型转换和2种隐式类型转换?"></a>2.	例举3种强制类型转换和2种隐式类型转换?</h2><p>强制（parseInt(),parseFloat(),Number()）<br>隐式（&#x3D;&#x3D; ,!!）</p>
<h2 id="3-split-、join-的区别"><a href="#3-split-、join-的区别" class="headerlink" title="3.	split() 、join() 的区别"></a>3.	split() 、join() 的区别</h2><p>前者是切割成数组的形式，后者是将数组转换成字符串</p>
<h2 id="4-数组方法pop-push-unshift-shift"><a href="#4-数组方法pop-push-unshift-shift" class="headerlink" title="4.	数组方法pop() push() unshift() shift()"></a>4.	数组方法pop() push() unshift() shift()</h2><p>Push()尾部添加 pop()尾部删除<br>Unshift()头部添加 shift()头部删除</p>
<h2 id="5-事件绑定和普通事件有什么区别"><a href="#5-事件绑定和普通事件有什么区别" class="headerlink" title="5.	事件绑定和普通事件有什么区别"></a>5.	事件绑定和普通事件有什么区别</h2><p>普通添加事件的方法：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;hello&quot;</span>);</span><br><span class="line">btn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">alert</span>(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line">btn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">alert</span>(<span class="number">2</span>);</span><br><span class="line">&#125;</span><br><span class="line">执行上面的代码只会alert <span class="number">2</span> </span><br><span class="line"></span><br><span class="line">事件绑定方式添加事件：</span><br><span class="line"><span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;hello&quot;</span>);</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">alert</span>(<span class="number">1</span>);</span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">alert</span>(<span class="number">2</span>);</span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br><span class="line">执行上面的代码会先alert <span class="number">1</span> 再 alert <span class="number">2</span></span><br><span class="line"><span class="number">1.</span>	普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。</span><br><span class="line"><span class="number">2.</span>	普通事件绑定不支持<span class="variable constant_">DOM</span>事件流，事件捕获-目标元素-事件冒泡（可以把事件绑定在不同的阶段去执行）</span><br><span class="line"><span class="number">3.</span>	addEventListener不兼容低版本<span class="variable constant_">IE</span>，第三个参数默认为<span class="literal">false</span>，表示在事件冒泡阶段执行</span><br><span class="line">普通事件无法取消；第三个参数为<span class="literal">true</span>的时候表示在事件捕获的阶段执行；不需要on前缀；</span><br><span class="line">addEventLisntener还支持事件冒泡+事件捕获；</span><br><span class="line"><span class="number">4.</span>	addEventLisntener同一个元素绑定完全相同的事件并不会覆盖掉前面的事件</span><br><span class="line"><span class="number">5.</span>	attachEvent只支持事件冒泡，不支持事件捕获。</span><br></pre></td></tr></table></figure>

<h2 id="6-IE和DOM事件流的区别"><a href="#6-IE和DOM事件流的区别" class="headerlink" title="6.	IE和DOM事件流的区别"></a>6.	IE和DOM事件流的区别</h2><p>1.执行顺序不一样、<br>2.参数不一样<br>3.事件加不加on<br>4.this指向问题</p>
<h2 id="7-IE和标准下有哪些兼容性的写法"><a href="#7-IE和标准下有哪些兼容性的写法" class="headerlink" title="7.	IE和标准下有哪些兼容性的写法"></a>7.	IE和标准下有哪些兼容性的写法</h2><p>Var ev &#x3D; ev || window.event；   &#x2F;&#x2F; 获取触发事件对象<br>Var target &#x3D; ev.srcElement||ev.target  &#x2F;&#x2F; 获取触发事件的源对象<br>document.documentElement.clientWidth || document.body.clientWidth</p>
<h2 id="8-call和apply的区别"><a href="#8-call和apply的区别" class="headerlink" title="8.	call和apply的区别"></a>8.	call和apply的区别</h2><p>call方法:<br>语法：call(thisObj，Object1,Object2…)<br>定义：调用一个对象的一个方法，以另一个对象替换当前对象。<br>说明：<br>call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。<br>如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。</p>
<p>apply方法：<br>语法：apply(thisObj，[argArray])<br>定义：应用某一对象的一个方法，用另一个对象替换当前对象。<br>说明：<br>如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。<br>如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。</p>
<h2 id="9-b继承a的方法"><a href="#9-b继承a的方法" class="headerlink" title="9.	b继承a的方法"></a>9.	b继承a的方法</h2><p>原型链继承<br>借用构造函数继承<br>原型+构造函数组合继承<br>寄生式继承</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">A</span>(<span class="params"> age, name </span>)&#123; </span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age; </span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name; </span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line">A.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">show</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123; </span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;父级方法&#x27;</span>); </span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">B</span>(<span class="params">age,name,job</span>)&#123; </span><br><span class="line">  A.<span class="title function_">apply</span>( <span class="variable language_">this</span>, <span class="variable language_">arguments</span> ); </span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">job</span> = job; </span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line">B.<span class="property"><span class="keyword">prototype</span></span> = <span class="keyword">new</span> <span class="title function_">A</span>();</span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> <span class="title function_">A</span>(<span class="number">14</span>,<span class="string">&#x27;侠客行&#x27;</span>); </span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="title function_">B</span>(<span class="number">15</span>,<span class="string">&#x27;狼侠&#x27;</span>,<span class="string">&#x27;侠客&#x27;</span>); </span><br></pre></td></tr></table></figure>

<h2 id="10-如何阻止事件冒泡和默认事件"><a href="#10-如何阻止事件冒泡和默认事件" class="headerlink" title="10.	如何阻止事件冒泡和默认事件"></a>10.	如何阻止事件冒泡和默认事件</h2><p>canceBubble()只支持IE,return false,stopPropagation()</p>
<h2 id="11-JS创建对象的几种方式？"><a href="#11-JS创建对象的几种方式？" class="headerlink" title="11.	JS创建对象的几种方式？"></a>11.	JS创建对象的几种方式？</h2><p>对象字面量 &#x2F; Object构造函数<br>构造函数<br>纯构造函数<br>空构造函数 + 原型<br>混合构造函数 + 原型<br>动态原型</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 动态原型的使用</span></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name, work</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// JS中通过if条件动态给一个对象添加属性或者方法的过程就是动态原型</span></span><br><span class="line">        <span class="keyword">if</span> (work) &#123;</span><br><span class="line">            <span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">working</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我的工作是：&#x27;</span>, work);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">寄生构造函数</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">create</span>()</span><br></pre></td></tr></table></figure>

<h2 id="12-this指针，闭包，作用域"><a href="#12-this指针，闭包，作用域" class="headerlink" title="12.	this指针，闭包，作用域"></a>12.	this指针，闭包，作用域</h2><p>闭包： 收敛权限，避免变量全局污染；可以实现模块化（jQuery）</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 立即执行函数</span></span><br><span class="line">    <span class="keyword">var</span> common = (<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> name = <span class="string">&#x27;common module&#x27;</span>;</span><br><span class="line">        <span class="keyword">function</span> <span class="title function_">initPage</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 向外暴露一个对象</span></span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            initpage : initPage</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)();</span><br><span class="line"></span><br><span class="line">    common.<span class="title function_">initpage</span>();</span><br><span class="line"><span class="comment">// 使用闭包函数实现点击弹出真实索引</span></span><br><span class="line">    <span class="keyword">var</span> lis = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; lis.<span class="property">length</span>; i++) &#123;</span><br><span class="line">        (<span class="keyword">function</span> (<span class="params">i</span>) &#123;</span><br><span class="line">            lis[i].<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">                <span class="title function_">alert</span>(i);</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)(i);</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h2 id="13-添加-删除-替换-插入到某个接点的方法"><a href="#13-添加-删除-替换-插入到某个接点的方法" class="headerlink" title="13.	添加 删除 替换 插入到某个接点的方法"></a>13.	添加 删除 替换 插入到某个接点的方法</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">obj.<span class="title function_">appendChid</span>()</span><br><span class="line">obj.<span class="title function_">insertBefore</span>()</span><br><span class="line">obj.<span class="title function_">replaceChild</span>()</span><br><span class="line">obj.<span class="title function_">removeChild</span>()</span><br></pre></td></tr></table></figure>

<h2 id="14-javascript的本地对象，内置对象和宿主对象"><a href="#14-javascript的本地对象，内置对象和宿主对象" class="headerlink" title="14.	javascript的本地对象，内置对象和宿主对象"></a>14.	javascript的本地对象，内置对象和宿主对象</h2><p>本地对象为array obj regexp等可以new实例化<br>内置对象为gload Math 等不可以实例化的<br>宿主对象为浏览器自带的document,window 等</p>
<h2 id="15-window-onload-和document-ready的区别"><a href="#15-window-onload-和document-ready的区别" class="headerlink" title="15.	window.onload 和document ready的区别"></a>15.	window.onload 和document ready的区别</h2><p>window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。<br>$(document).ready要比window.onload先执行<br>window.onload只能出来一次，$(document).ready可以出现多次</p>
<h2 id="16-”-”和“-”的不同"><a href="#16-”-”和“-”的不同" class="headerlink" title="16.	”&#x3D;&#x3D;”和“&#x3D;&#x3D;&#x3D;”的不同"></a>16.	”&#x3D;&#x3D;”和“&#x3D;&#x3D;&#x3D;”的不同</h2><p>前者会自动转换类型<br>后者不会</p>
<h2 id="17-javascript的同源策略"><a href="#17-javascript的同源策略" class="headerlink" title="17.	javascript的同源策略"></a>17.	javascript的同源策略</h2><p>一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、议和端口号的组合。<br>Ajax跨域的实现，JSONP的底层实现原理，如何解决跨域请求</p>
<h2 id="18-JavaScript是一门什么样的语言，它有哪些特点？"><a href="#18-JavaScript是一门什么样的语言，它有哪些特点？" class="headerlink" title="18.	JavaScript是一门什么样的语言，它有哪些特点？"></a>18.	JavaScript是一门什么样的语言，它有哪些特点？</h2><p>没有标准答案。<br>javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。<br>基本特点<br>1．是一种解释性脚本语言（代码不进行预编译）。<br>2．主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。<br>3．可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。<br>4．跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。</p>
<h2 id="19-JavaScript的数据类型都有什么？"><a href="#19-JavaScript的数据类型都有什么？" class="headerlink" title="19.	JavaScript的数据类型都有什么？"></a>19.	JavaScript的数据类型都有什么？</h2><p>基本数据类型：String,boolean,Number,Undefined, Null<br>引用数据类型：Object(Array,Date,RegExp,Function)<br>那么问题来了，如何判断某变量是否为数组数据类型？<br>方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效<br>方法二.obj instanceof Array 在某些IE版本中不正确<br>方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">if</span>(<span class="keyword">typeof</span> <span class="title class_">Array</span>.<span class="property">isArray</span>===<span class="string">&quot;undefined&quot;</span>)</span><br><span class="line">&#123;</span><br><span class="line">  <span class="title class_">Array</span>.<span class="property">isArray</span> = <span class="keyword">function</span>(<span class="params">arg</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(arg)===<span class="string">&quot;[object Array]&quot;</span></span><br><span class="line">    &#125;;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="20-已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？-不使用第三方框架"><a href="#20-已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？-不使用第三方框架" class="headerlink" title="20.	已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)"></a>20.	已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)</h2><pre><code>document.getElementById(“ID”).value
</code></pre>
<h2 id="21-希望获取到页面中所有的checkbox怎么做？-不使用第三方框架"><a href="#21-希望获取到页面中所有的checkbox怎么做？-不使用第三方框架" class="headerlink" title="21.	希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)"></a>21.	希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">var</span> domList = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(‘input’)</span><br><span class="line"><span class="keyword">var</span> checkBoxList = [];</span><br><span class="line"><span class="keyword">var</span> len = domList.<span class="property">length</span>;　　<span class="comment">//缓存到局部变量</span></span><br><span class="line"><span class="keyword">while</span> (len--) &#123;　　<span class="comment">//使用while的效率会比for循环更高</span></span><br><span class="line">　　<span class="keyword">if</span> (domList[len].<span class="property">type</span> == ‘checkbox’) &#123;</span><br><span class="line">    　　checkBoxList.<span class="title function_">push</span>(domList[len]);</span><br><span class="line">　　&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="22-设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色-不使用第三方框架"><a href="#22-设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色-不使用第三方框架" class="headerlink" title="22.	设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)"></a>22.	设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> dom = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(“<span class="variable constant_">ID</span>”);</span><br><span class="line">dom.<span class="property">innerHTML</span> = “xxxx”</span><br><span class="line">dom.<span class="property">style</span>.<span class="property">color</span> = “#<span class="number">000</span>”</span><br></pre></td></tr></table></figure>

<h2 id="23-当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？"><a href="#23-当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？" class="headerlink" title="23.	当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？"></a>23.	当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？</h2><p>直接在DOM里绑定事件：<div onclick="test()"></div><br>在JS里通过onclick绑定：xxx.onclick &#x3D; test<br>通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)<br>那么问题来了，Javascript的事件流模型都有什么？<br>“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播<br>“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的<br>“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡</p>
<h2 id="24-看下列代码输出为何？解释原因。"><a href="#24-看下列代码输出为何？解释原因。" class="headerlink" title="24.	看下列代码输出为何？解释原因。"></a>24.	看下列代码输出为何？解释原因。</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="title function_">alert</span>(<span class="keyword">typeof</span> a); <span class="comment">// undefined</span></span><br><span class="line"><span class="title function_">alert</span>(b); <span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>

<p>解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。</p>
<h2 id="25-看下列代码-输出什么？解释原因。"><a href="#25-看下列代码-输出什么？解释原因。" class="headerlink" title="25.	看下列代码,输出什么？解释原因。"></a>25.	看下列代码,输出什么？解释原因。</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="literal">null</span>;</span><br><span class="line"><span class="title function_">alert</span>(<span class="keyword">typeof</span> a); <span class="comment">//object</span></span><br></pre></td></tr></table></figure>

<p>解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。</p>
<h2 id="26-看下列代码-输出什么？解释原因。"><a href="#26-看下列代码-输出什么？解释原因。" class="headerlink" title="26.	看下列代码,输出什么？解释原因。"></a>26.	看下列代码,输出什么？解释原因。</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="literal">undefined</span>;</span><br><span class="line"><span class="literal">undefined</span> == <span class="literal">null</span>; <span class="comment">// true</span></span><br><span class="line"><span class="number">1</span> == <span class="literal">true</span>;   <span class="comment">// true</span></span><br><span class="line"><span class="number">2</span> == <span class="literal">true</span>;   <span class="comment">// false</span></span><br><span class="line"><span class="number">0</span> == <span class="literal">false</span>;  <span class="comment">// true</span></span><br><span class="line"><span class="number">0</span> == <span class="string">&#x27;&#x27;</span>;     <span class="comment">// true</span></span><br><span class="line"><span class="title class_">NaN</span> == <span class="title class_">NaN</span>;  <span class="comment">// false</span></span><br><span class="line">[] == <span class="literal">false</span>; <span class="comment">// true</span></span><br><span class="line">[] == ![];   <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p>•	undefined与null相等，但不恒等（&#x3D;&#x3D;&#x3D;）<br>一个是number一个是string时，会尝试将string转换为number<br>尝试将boolean转换为number，0或1<br>尝试将Object转换成number或string，取决于另外一个对比量的类型<br>所以，对于0、空字符串的判断，建议使用 “&#x3D;&#x3D;&#x3D;” 。“&#x3D;&#x3D;&#x3D;”会先判断两边的值类型，类型不匹配时为false。<br>那么问题来了，看下面的代码，输出什么，foo的值为什么？</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="string">&quot;11&quot;</span>+<span class="number">2</span>-<span class="string">&quot;1&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foo);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> foo);   <span class="comment">// number</span></span><br></pre></td></tr></table></figure>

<p>执行完后foo的值为111，foo的类型为number。</p>
<h2 id="27-看代码给答案。"><a href="#27-看代码给答案。" class="headerlink" title="27.	看代码给答案。"></a>27.	看代码给答案。</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">a.<span class="property">value</span> = <span class="number">1</span>;</span><br><span class="line">b = a;</span><br><span class="line">b.<span class="property">value</span> = <span class="number">2</span>;</span><br><span class="line"><span class="title function_">alert</span>(a.<span class="property">value</span>);</span><br></pre></td></tr></table></figure>

<p>答案：2（考察引用数据类型细节）</p>
<h2 id="28-已知数组var-stringArray-“This”-“is”-“Baidu”-“Campus”-，Alert出”This-is-Baidu-Campus”。"><a href="#28-已知数组var-stringArray-“This”-“is”-“Baidu”-“Campus”-，Alert出”This-is-Baidu-Campus”。" class="headerlink" title="28. 已知数组var stringArray &#x3D; [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。"></a>28. 已知数组var stringArray &#x3D; [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。</h2><p>答案：alert(stringArray.join(“ ”))		&#x2F;&#x2F; 注意中间的空格</p>
<h2 id="29-已知有字符串foo-”get-element-by-id”-写一个function将其转化成驼峰表示法”getElementById”。"><a href="#29-已知有字符串foo-”get-element-by-id”-写一个function将其转化成驼峰表示法”getElementById”。" class="headerlink" title="29.	已知有字符串foo&#x3D;”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。"></a>29.	已知有字符串foo&#x3D;”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">function</span> <span class="title function_">combo</span>(<span class="params">msg</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> arr=msg.<span class="title function_">split</span>(<span class="string">&quot;-&quot;</span>);</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">        arr[i]=arr[i].<span class="title function_">charAt</span>(<span class="number">0</span>).<span class="title function_">toUpperCase</span>()+arr[i].<span class="title function_">substr</span>(<span class="number">1</span>,arr[i].<span class="property">length</span>-<span class="number">1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    msg=arr.<span class="title function_">join</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span> msg;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="30-var-numberArray-3-6-2-4-1-5-（考察基础API）"><a href="#30-var-numberArray-3-6-2-4-1-5-（考察基础API）" class="headerlink" title="30.	var numberArray &#x3D; [3,6,2,4,1,5]; （考察基础API）"></a>30.	var numberArray &#x3D; [3,6,2,4,1,5]; （考察基础API）</h2><ol>
<li>实现对该数组的倒排，输出[5,1,4,2,6,3]<br>numberArray.reverse()</li>
<li>实现对该数组的降序排列，输出[6,5,4,3,2,1]<br>numberArray.sort(function(a,b){return b-a})</li>
</ol>
<h2 id="31-输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26"><a href="#31-输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26" class="headerlink" title="31.	输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26"></a>31.	输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> d = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="comment">// 获取年，getFullYear()返回4位的数字</span></span><br><span class="line"><span class="keyword">var</span> year = d.<span class="title function_">getFullYear</span>();</span><br><span class="line"><span class="comment">// 获取月，月份比较特殊，0是1月，11是12月</span></span><br><span class="line"><span class="keyword">var</span> month = d.<span class="title function_">getMonth</span>() + <span class="number">1</span>;</span><br><span class="line"><span class="comment">// 变成两位</span></span><br><span class="line">month = month &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span> + month : month;</span><br><span class="line"><span class="comment">// 获取日</span></span><br><span class="line"><span class="keyword">var</span> day = d.<span class="title function_">getDate</span>();</span><br><span class="line">day = day &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span> + day : day;</span><br><span class="line"><span class="title function_">alert</span>(year + <span class="string">&#x27;-&#x27;</span> + month + <span class="string">&#x27;-&#x27;</span> + day);</span><br></pre></td></tr></table></figure>

<h2 id="32-将字符串”-id-name-”中的-id-替换成10，-name-替换成Tony-（使用正则表达式）"><a href="#32-将字符串”-id-name-”中的-id-替换成10，-name-替换成Tony-（使用正则表达式）" class="headerlink" title="32.	将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）"></a>32.	将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）</h2><p>答案：”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>“.replace(&#x2F;{$id}&#x2F;g, ‘10’).replace(&#x2F;{$name}&#x2F;g, ‘Tony’);</p>
<h2 id="33-为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将-“进行转义"><a href="#33-为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将-“进行转义" class="headerlink" title="33.	为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将&lt;, &gt;, &amp;, “进行转义"></a>33.	为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将&lt;, &gt;, &amp;, “进行转义</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">function</span> <span class="title function_">escapeHtml</span>(<span class="params">str</span>) &#123;</span><br><span class="line"><span class="keyword">return</span> str.<span class="title function_">replace</span>(<span class="regexp">/[&lt;&gt;”&amp;]/g</span>, <span class="keyword">function</span>(<span class="params">match</span>) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (match) &#123;</span><br><span class="line">                   <span class="keyword">case</span> “&lt;”:</span><br><span class="line">                      <span class="keyword">return</span> “&amp;lt;”;</span><br><span class="line">                   <span class="keyword">case</span> “&gt;”:</span><br><span class="line">                      <span class="keyword">return</span> “&amp;gt;”;</span><br><span class="line">                   <span class="keyword">case</span> “&amp;”:</span><br><span class="line">                      <span class="keyword">return</span> “&amp;amp;”;</span><br><span class="line">                   <span class="keyword">case</span> “\””:</span><br><span class="line">                      <span class="keyword">return</span> “&amp;quot;”;</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="34-foo-foo-bar-，这行代码是什么意思？为什么要这样写？"><a href="#34-foo-foo-bar-，这行代码是什么意思？为什么要这样写？" class="headerlink" title="34.	foo &#x3D; foo||bar ，这行代码是什么意思？为什么要这样写？"></a>34.	foo &#x3D; foo||bar ，这行代码是什么意思？为什么要这样写？</h2><p>答案：if(!foo) foo &#x3D; bar; &#x2F;&#x2F;如果foo存在，值不变，否则把bar的值赋给foo。<br>短路表达式：作为”&amp;&amp;”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。</p>
<h2 id="35-看下列代码，将会输出什么-变量声明提升"><a href="#35-看下列代码，将会输出什么-变量声明提升" class="headerlink" title="35.	看下列代码，将会输出什么?(变量声明提升)"></a>35.	看下列代码，将会输出什么?(变量声明提升)</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">var</span> foo = <span class="number">1</span>;</span><br><span class="line">(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(foo);</span><br><span class="line">    <span class="keyword">var</span> foo = <span class="number">2</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(foo);</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>答案：输出undefined 和 2。上面代码相当于：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">var</span> foo = <span class="number">1</span>;</span><br><span class="line">(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> foo;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(foo); <span class="comment">//undefined</span></span><br><span class="line">    foo = <span class="number">2</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(foo); <span class="comment">// 2;   </span></span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。</p>
<h2 id="36-用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。"><a href="#36-用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。" class="headerlink" title="36.	用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。"></a>36.	用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">function</span> <span class="title function_">randomNub</span>(<span class="params">aArray, len, min, max</span>) &#123;</span><br><span class="line">               <span class="keyword">if</span> (len &gt;= (max - min)) &#123;</span><br><span class="line">                   <span class="keyword">return</span> <span class="string">&#x27;超过&#x27;</span> + min + <span class="string">&#x27;-&#x27;</span> + max + <span class="string">&#x27;之间的个数范围&#x27;</span> + (max - min - <span class="number">1</span>) + <span class="string">&#x27;个的总数&#x27;</span>;</span><br><span class="line">               &#125;</span><br><span class="line">               <span class="keyword">if</span> (aArray.<span class="property">length</span> &gt;= len) &#123;</span><br><span class="line">                   aArray.<span class="title function_">sort</span>(<span class="keyword">function</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">                       <span class="keyword">return</span> a - b</span><br><span class="line">                   &#125;);</span><br><span class="line">                   <span class="keyword">return</span> aArray;</span><br><span class="line">               &#125;</span><br><span class="line">               <span class="keyword">var</span> nowNub = <span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * (max - min - <span class="number">1</span>)) + (min + <span class="number">1</span>);</span><br><span class="line">               <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; aArray.<span class="property">length</span>; j++) &#123;</span><br><span class="line">                   <span class="keyword">if</span> (nowNub == aArray[j]) &#123;</span><br><span class="line">                       <span class="title function_">randomNub</span>(aArray, len, min, max);</span><br><span class="line">                       <span class="keyword">return</span>;</span><br><span class="line">                   &#125;</span><br><span class="line">               &#125;</span><br><span class="line">               aArray.<span class="title function_">push</span>(nowNub);</span><br><span class="line">               <span class="title function_">randomNub</span>(aArray, len, min, max);</span><br><span class="line">               <span class="keyword">return</span> aArray;</span><br><span class="line">           &#125;</span><br><span class="line"><span class="keyword">var</span> arr=[];</span><br><span class="line"><span class="title function_">randomNub</span>(arr,<span class="number">10</span>,<span class="number">10</span>,<span class="number">100</span>);</span><br></pre></td></tr></table></figure>

<h2 id="37-把两个数组合并，并删除第二个元素。"><a href="#37-把两个数组合并，并删除第二个元素。" class="headerlink" title="37.	把两个数组合并，并删除第二个元素。"></a>37.	把两个数组合并，并删除第二个元素。</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> array1 = [<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;b&#x27;</span>,<span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> bArray = [<span class="string">&#x27;d&#x27;</span>,<span class="string">&#x27;e&#x27;</span>,<span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> cArray = array1.<span class="title function_">concat</span>(bArray);</span><br><span class="line">cArray.<span class="title function_">splice</span>(<span class="number">1</span>,<span class="number">1</span>);</span><br></pre></td></tr></table></figure>

<h2 id="38-怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）"><a href="#38-怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）" class="headerlink" title="38.	怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）"></a>38.	怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）</h2><p>1）创建新节点<br>createDocumentFragment()    &#x2F;&#x2F;创建一个DOM片段<br>createElement()   &#x2F;&#x2F;创建一个具体的元素<br>createTextNode()   &#x2F;&#x2F;创建一个文本节点<br>2）添加、移除、替换、插入<br>appendChild()      &#x2F;&#x2F;添加<br>removeChild()      &#x2F;&#x2F;移除<br>replaceChild()      &#x2F;&#x2F;替换<br>insertBefore()      &#x2F;&#x2F;插入<br>3）查找<br>getElementsByTagName()    &#x2F;&#x2F;通过标签名称<br>getElementsByName()     &#x2F;&#x2F;通过元素的Name属性的值<br>getElementById()        &#x2F;&#x2F;通过元素Id，唯一性</p>
<h2 id="39-有这样一个URL：http-item-taobao-com-item-htm-a-1-b-2-c-d-xxx-e，请写一段JS程序提取URL中的各个GET参数-参数名和参数个数不确定-，将其按key-value形式返回到一个json结构中，如-a-’1′-b-’2′-c-”-d-’xxx’-e-undefined-。"><a href="#39-有这样一个URL：http-item-taobao-com-item-htm-a-1-b-2-c-d-xxx-e，请写一段JS程序提取URL中的各个GET参数-参数名和参数个数不确定-，将其按key-value形式返回到一个json结构中，如-a-’1′-b-’2′-c-”-d-’xxx’-e-undefined-。" class="headerlink" title="39.	有这样一个URL：http://item.taobao.com/item.htm?a=1&amp;b=2&amp;c=&amp;d=xxx&amp;e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。"></a>39.	有这样一个URL：<a target="_blank" rel="noopener" href="http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e%EF%BC%8C%E8%AF%B7%E5%86%99%E4%B8%80%E6%AE%B5JS%E7%A8%8B%E5%BA%8F%E6%8F%90%E5%8F%96URL%E4%B8%AD%E7%9A%84%E5%90%84%E4%B8%AAGET%E5%8F%82%E6%95%B0(%E5%8F%82%E6%95%B0%E5%90%8D%E5%92%8C%E5%8F%82%E6%95%B0%E4%B8%AA%E6%95%B0%E4%B8%8D%E7%A1%AE%E5%AE%9A)%EF%BC%8C%E5%B0%86%E5%85%B6%E6%8C%89key-value%E5%BD%A2%E5%BC%8F%E8%BF%94%E5%9B%9E%E5%88%B0%E4%B8%80%E4%B8%AAjson%E7%BB%93%E6%9E%84%E4%B8%AD%EF%BC%8C%E5%A6%82%7Ba:%E2%80%991%E2%80%B2">http://item.taobao.com/item.htm?a=1&amp;b=2&amp;c=&amp;d=xxx&amp;e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′</a>, b:’2′, c:”, d:’xxx’, e:undefined}。</h2><p>答案：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">function</span> <span class="title function_">serilizeUrl</span>(<span class="params">url</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> urlObject = &#123;&#125;;</span><br><span class="line">    <span class="keyword">if</span> (<span class="regexp">/\?/</span>.<span class="title function_">test</span>(url)) &#123;</span><br><span class="line">        <span class="keyword">var</span> urlString = url.<span class="title function_">substring</span>(url.<span class="title function_">indexOf</span>(<span class="string">&quot;?&quot;</span>) + <span class="number">1</span>);</span><br><span class="line">        <span class="keyword">var</span> urlArray = urlString.<span class="title function_">split</span>(<span class="string">&quot;&amp;&quot;</span>);</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = urlArray.<span class="property">length</span>; i &lt; len; i++) &#123;</span><br><span class="line">            <span class="keyword">var</span> urlItem = urlArray[i];</span><br><span class="line">            <span class="keyword">var</span> item = urlItem.<span class="title function_">split</span>(<span class="string">&quot;=&quot;</span>);</span><br><span class="line">            urlObject[item[<span class="number">0</span>]] = item[<span class="number">1</span>];</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> urlObject;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="40-正则表达式构造函数var-reg-new-RegExp-“xxx”-与正则表达字面量var-reg-有什么不同？匹配邮箱的正则表达式？"><a href="#40-正则表达式构造函数var-reg-new-RegExp-“xxx”-与正则表达字面量var-reg-有什么不同？匹配邮箱的正则表达式？" class="headerlink" title="40.	正则表达式构造函数var reg&#x3D;new RegExp(“xxx”)与正则表达字面量var reg&#x3D;&#x2F;&#x2F;有什么不同？匹配邮箱的正则表达式？"></a>40.	正则表达式构造函数var reg&#x3D;new RegExp(“xxx”)与正则表达字面量var reg&#x3D;&#x2F;&#x2F;有什么不同？匹配邮箱的正则表达式？</h2><p>答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\表示一个\）。使用正则表达字面量的效率更高。<br>邮箱的正则匹配：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> regMail = <span class="regexp">/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]&#123;2,3&#125;)&#123;1,2&#125;)$/</span>;</span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://jhcgnb.cn">GISer</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://jhcgnb.cn/posts/fec612ee/">https://jhcgnb.cn/posts/fec612ee/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://jhcgnb.cn" target="_blank">纸飞机的旅行</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a></div><div class="post_share"><div class="social-share" data-image="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="/img/wechat.jpg" alt="wechat"/></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="/img/alipay.jpg" alt="alipay"/></a><div class="post-qr-code-desc">alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/undefined/" title="多边形"><img class="cover" src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230708212920053.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">多边形</div></div></a></div><div class="next-post pull-right"><a href="/posts/e911cef5/" title="convex"><img class="cover" src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230708212656757.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">convex</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/undefined/" title="5.Ajax和网络"><img class="cover" src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-22</div><div class="title">5.Ajax和网络</div></div></a></div><div><a href="/posts/5a9e107b/" title="11.性能优化"><img class="cover" src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-10-18</div><div class="title">11.性能优化</div></div></a></div><div><a href="/posts/e8bb4d48/" title="1.HTML和CSS"><img class="cover" src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-04-22</div><div class="title">1.HTML和CSS</div></div></a></div><div><a href="/posts/4cbe9020/" title="9.NodeJS"><img class="cover" src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-22</div><div class="title">9.NodeJS</div></div></a></div></div></div><hr class="custom-hr"/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="lv-container" data-id="city" data-uid="MTAyMC81ODY2OC8zNTEzMA=="></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/img/adaver.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">GISer</div><div class="author-info__description">选择有时候比努力更重要</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">20</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">3</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Jinhe404"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Jinhe404" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="/jhcgnb@163.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a><a class="social-icon" href="https://blog.csdn.net/weixin_44857463?type=blog" target="_blank" title="CSDN"><i class="fa fa-book-open"></i></a><a class="social-icon" href="tencent://AddContact/?fromId=45&amp;fromSubId=1&amp;subcmd=all&amp;uin=31025287432&amp;website=www.oicqzone.com" target="_blank" title="QQ"><i class="fab fa-qq"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#JS%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86"><span class="toc-number">1.</span> <span class="toc-text">JS基础知识</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-javascript%E7%9A%84typeof%E8%BF%94%E5%9B%9E%E5%93%AA%E4%BA%9B%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.</span> <span class="toc-text">1.	javascript的typeof返回哪些数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E4%BE%8B%E4%B8%BE3%E7%A7%8D%E5%BC%BA%E5%88%B6%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E5%92%8C2%E7%A7%8D%E9%9A%90%E5%BC%8F%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="toc-number">1.2.</span> <span class="toc-text">2.	例举3种强制类型转换和2种隐式类型转换?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-split-%E3%80%81join-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.3.</span> <span class="toc-text">3.	split() 、join() 的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95pop-push-unshift-shift"><span class="toc-number">1.4.</span> <span class="toc-text">4.	数组方法pop() push() unshift() shift()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%92%8C%E6%99%AE%E9%80%9A%E4%BA%8B%E4%BB%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">1.5.</span> <span class="toc-text">5.	事件绑定和普通事件有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-IE%E5%92%8CDOM%E4%BA%8B%E4%BB%B6%E6%B5%81%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.6.</span> <span class="toc-text">6.	IE和DOM事件流的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-IE%E5%92%8C%E6%A0%87%E5%87%86%E4%B8%8B%E6%9C%89%E5%93%AA%E4%BA%9B%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E5%86%99%E6%B3%95"><span class="toc-number">1.7.</span> <span class="toc-text">7.	IE和标准下有哪些兼容性的写法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-call%E5%92%8Capply%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.8.</span> <span class="toc-text">8.	call和apply的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-b%E7%BB%A7%E6%89%BFa%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">1.9.</span> <span class="toc-text">9.	b继承a的方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%92%8C%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.10.</span> <span class="toc-text">10.	如何阻止事件冒泡和默认事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-JS%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F%EF%BC%9F"><span class="toc-number">1.11.</span> <span class="toc-text">11.	JS创建对象的几种方式？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-this%E6%8C%87%E9%92%88%EF%BC%8C%E9%97%AD%E5%8C%85%EF%BC%8C%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">1.12.</span> <span class="toc-text">12.	this指针，闭包，作用域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E6%B7%BB%E5%8A%A0-%E5%88%A0%E9%99%A4-%E6%9B%BF%E6%8D%A2-%E6%8F%92%E5%85%A5%E5%88%B0%E6%9F%90%E4%B8%AA%E6%8E%A5%E7%82%B9%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">1.13.</span> <span class="toc-text">13.	添加 删除 替换 插入到某个接点的方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-javascript%E7%9A%84%E6%9C%AC%E5%9C%B0%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1%E5%92%8C%E5%AE%BF%E4%B8%BB%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.14.</span> <span class="toc-text">14.	javascript的本地对象，内置对象和宿主对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-window-onload-%E5%92%8Cdocument-ready%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.15.</span> <span class="toc-text">15.	window.onload 和document ready的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E2%80%9D-%E2%80%9D%E5%92%8C%E2%80%9C-%E2%80%9D%E7%9A%84%E4%B8%8D%E5%90%8C"><span class="toc-number">1.16.</span> <span class="toc-text">16.	”&#x3D;&#x3D;”和“&#x3D;&#x3D;&#x3D;”的不同</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-javascript%E7%9A%84%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5"><span class="toc-number">1.17.</span> <span class="toc-text">17.	javascript的同源策略</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-JavaScript%E6%98%AF%E4%B8%80%E9%97%A8%E4%BB%80%E4%B9%88%E6%A0%B7%E7%9A%84%E8%AF%AD%E8%A8%80%EF%BC%8C%E5%AE%83%E6%9C%89%E5%93%AA%E4%BA%9B%E7%89%B9%E7%82%B9%EF%BC%9F"><span class="toc-number">1.18.</span> <span class="toc-text">18.	JavaScript是一门什么样的语言，它有哪些特点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-JavaScript%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E9%83%BD%E6%9C%89%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">1.19.</span> <span class="toc-text">19.	JavaScript的数据类型都有什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E5%B7%B2%E7%9F%A5ID%E7%9A%84Input%E8%BE%93%E5%85%A5%E6%A1%86%EF%BC%8C%E5%B8%8C%E6%9C%9B%E8%8E%B7%E5%8F%96%E8%BF%99%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%E7%9A%84%E8%BE%93%E5%85%A5%E5%80%BC%EF%BC%8C%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F-%E4%B8%8D%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A1%86%E6%9E%B6"><span class="toc-number">1.20.</span> <span class="toc-text">20.	已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E5%B8%8C%E6%9C%9B%E8%8E%B7%E5%8F%96%E5%88%B0%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89%E7%9A%84checkbox%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F-%E4%B8%8D%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A1%86%E6%9E%B6"><span class="toc-number">1.21.</span> <span class="toc-text">21.	希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E5%B7%B2%E7%9F%A5ID%E7%9A%84DIV%E7%9A%84html%E5%86%85%E5%AE%B9%E4%B8%BAxxxx%EF%BC%8C%E5%AD%97%E4%BD%93%E9%A2%9C%E8%89%B2%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%91%E8%89%B2-%E4%B8%8D%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A1%86%E6%9E%B6"><span class="toc-number">1.22.</span> <span class="toc-text">22.	设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E5%BD%93%E4%B8%80%E4%B8%AADOM%E8%8A%82%E7%82%B9%E8%A2%AB%E7%82%B9%E5%87%BB%E6%97%B6%E5%80%99%EF%BC%8C%E6%88%91%E4%BB%AC%E5%B8%8C%E6%9C%9B%E8%83%BD%E5%A4%9F%E6%89%A7%E8%A1%8C%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%8C%E5%BA%94%E8%AF%A5%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F"><span class="toc-number">1.23.</span> <span class="toc-text">23.	当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E7%9C%8B%E4%B8%8B%E5%88%97%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E4%B8%BA%E4%BD%95%EF%BC%9F%E8%A7%A3%E9%87%8A%E5%8E%9F%E5%9B%A0%E3%80%82"><span class="toc-number">1.24.</span> <span class="toc-text">24.	看下列代码输出为何？解释原因。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E7%9C%8B%E4%B8%8B%E5%88%97%E4%BB%A3%E7%A0%81-%E8%BE%93%E5%87%BA%E4%BB%80%E4%B9%88%EF%BC%9F%E8%A7%A3%E9%87%8A%E5%8E%9F%E5%9B%A0%E3%80%82"><span class="toc-number">1.25.</span> <span class="toc-text">25.	看下列代码,输出什么？解释原因。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E7%9C%8B%E4%B8%8B%E5%88%97%E4%BB%A3%E7%A0%81-%E8%BE%93%E5%87%BA%E4%BB%80%E4%B9%88%EF%BC%9F%E8%A7%A3%E9%87%8A%E5%8E%9F%E5%9B%A0%E3%80%82"><span class="toc-number">1.26.</span> <span class="toc-text">26.	看下列代码,输出什么？解释原因。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E7%9C%8B%E4%BB%A3%E7%A0%81%E7%BB%99%E7%AD%94%E6%A1%88%E3%80%82"><span class="toc-number">1.27.</span> <span class="toc-text">27.	看代码给答案。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E5%B7%B2%E7%9F%A5%E6%95%B0%E7%BB%84var-stringArray-%E2%80%9CThis%E2%80%9D-%E2%80%9Cis%E2%80%9D-%E2%80%9CBaidu%E2%80%9D-%E2%80%9CCampus%E2%80%9D-%EF%BC%8CAlert%E5%87%BA%E2%80%9DThis-is-Baidu-Campus%E2%80%9D%E3%80%82"><span class="toc-number">1.28.</span> <span class="toc-text">28. 已知数组var stringArray &#x3D; [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-%E5%B7%B2%E7%9F%A5%E6%9C%89%E5%AD%97%E7%AC%A6%E4%B8%B2foo-%E2%80%9Dget-element-by-id%E2%80%9D-%E5%86%99%E4%B8%80%E4%B8%AAfunction%E5%B0%86%E5%85%B6%E8%BD%AC%E5%8C%96%E6%88%90%E9%A9%BC%E5%B3%B0%E8%A1%A8%E7%A4%BA%E6%B3%95%E2%80%9DgetElementById%E2%80%9D%E3%80%82"><span class="toc-number">1.29.</span> <span class="toc-text">29.	已知有字符串foo&#x3D;”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-var-numberArray-3-6-2-4-1-5-%EF%BC%88%E8%80%83%E5%AF%9F%E5%9F%BA%E7%A1%80API%EF%BC%89"><span class="toc-number">1.30.</span> <span class="toc-text">30.	var numberArray &#x3D; [3,6,2,4,1,5]; （考察基础API）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E8%BE%93%E5%87%BA%E4%BB%8A%E5%A4%A9%E7%9A%84%E6%97%A5%E6%9C%9F%EF%BC%8C%E4%BB%A5YYYY-MM-DD%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E6%AF%94%E5%A6%82%E4%BB%8A%E5%A4%A9%E6%98%AF2014%E5%B9%B49%E6%9C%8826%E6%97%A5%EF%BC%8C%E5%88%99%E8%BE%93%E5%87%BA2014-09-26"><span class="toc-number">1.31.</span> <span class="toc-text">31.	输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E5%B0%86%E5%AD%97%E7%AC%A6%E4%B8%B2%E2%80%9D-id-name-%E2%80%9D%E4%B8%AD%E7%9A%84-id-%E6%9B%BF%E6%8D%A2%E6%88%9010%EF%BC%8C-name-%E6%9B%BF%E6%8D%A2%E6%88%90Tony-%EF%BC%88%E4%BD%BF%E7%94%A8%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%89"><span class="toc-number">1.32.</span> <span class="toc-text">32.	将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E4%B8%BA%E4%BA%86%E4%BF%9D%E8%AF%81%E9%A1%B5%E9%9D%A2%E8%BE%93%E5%87%BA%E5%AE%89%E5%85%A8%EF%BC%8C%E6%88%91%E4%BB%AC%E7%BB%8F%E5%B8%B8%E9%9C%80%E8%A6%81%E5%AF%B9%E4%B8%80%E4%BA%9B%E7%89%B9%E6%AE%8A%E7%9A%84%E5%AD%97%E7%AC%A6%E8%BF%9B%E8%A1%8C%E8%BD%AC%E4%B9%89%EF%BC%8C%E8%AF%B7%E5%86%99%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0escapeHtml%EF%BC%8C%E5%B0%86-%E2%80%9C%E8%BF%9B%E8%A1%8C%E8%BD%AC%E4%B9%89"><span class="toc-number">1.33.</span> <span class="toc-text">33.	为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将&lt;, &gt;, &amp;, “进行转义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-foo-foo-bar-%EF%BC%8C%E8%BF%99%E8%A1%8C%E4%BB%A3%E7%A0%81%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D%EF%BC%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E8%BF%99%E6%A0%B7%E5%86%99%EF%BC%9F"><span class="toc-number">1.34.</span> <span class="toc-text">34.	foo &#x3D; foo||bar ，这行代码是什么意思？为什么要这样写？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-%E7%9C%8B%E4%B8%8B%E5%88%97%E4%BB%A3%E7%A0%81%EF%BC%8C%E5%B0%86%E4%BC%9A%E8%BE%93%E5%87%BA%E4%BB%80%E4%B9%88-%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87"><span class="toc-number">1.35.</span> <span class="toc-text">35.	看下列代码，将会输出什么?(变量声明提升)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-%E7%94%A8js%E5%AE%9E%E7%8E%B0%E9%9A%8F%E6%9C%BA%E9%80%89%E5%8F%9610%E2%80%93100%E4%B9%8B%E9%97%B4%E7%9A%8410%E4%B8%AA%E6%95%B0%E5%AD%97%EF%BC%8C%E5%AD%98%E5%85%A5%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%EF%BC%8C%E5%B9%B6%E6%8E%92%E5%BA%8F%E3%80%82"><span class="toc-number">1.36.</span> <span class="toc-text">36.	用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-%E6%8A%8A%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%E5%90%88%E5%B9%B6%EF%BC%8C%E5%B9%B6%E5%88%A0%E9%99%A4%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%85%83%E7%B4%A0%E3%80%82"><span class="toc-number">1.37.</span> <span class="toc-text">37.	把两个数组合并，并删除第二个元素。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-%E6%80%8E%E6%A0%B7%E6%B7%BB%E5%8A%A0%E3%80%81%E7%A7%BB%E9%99%A4%E3%80%81%E7%A7%BB%E5%8A%A8%E3%80%81%E5%A4%8D%E5%88%B6%E3%80%81%E5%88%9B%E5%BB%BA%E5%92%8C%E6%9F%A5%E6%89%BE%E8%8A%82%E7%82%B9%EF%BC%88%E5%8E%9F%E7%94%9FJS%EF%BC%8C%E5%AE%9E%E5%9C%A8%E5%9F%BA%E7%A1%80%EF%BC%8C%E6%B2%A1%E7%BB%86%E5%86%99%E6%AF%8F%E4%B8%80%E6%AD%A5%EF%BC%89"><span class="toc-number">1.38.</span> <span class="toc-text">38.	怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-%E6%9C%89%E8%BF%99%E6%A0%B7%E4%B8%80%E4%B8%AAURL%EF%BC%9Ahttp-item-taobao-com-item-htm-a-1-b-2-c-d-xxx-e%EF%BC%8C%E8%AF%B7%E5%86%99%E4%B8%80%E6%AE%B5JS%E7%A8%8B%E5%BA%8F%E6%8F%90%E5%8F%96URL%E4%B8%AD%E7%9A%84%E5%90%84%E4%B8%AAGET%E5%8F%82%E6%95%B0-%E5%8F%82%E6%95%B0%E5%90%8D%E5%92%8C%E5%8F%82%E6%95%B0%E4%B8%AA%E6%95%B0%E4%B8%8D%E7%A1%AE%E5%AE%9A-%EF%BC%8C%E5%B0%86%E5%85%B6%E6%8C%89key-value%E5%BD%A2%E5%BC%8F%E8%BF%94%E5%9B%9E%E5%88%B0%E4%B8%80%E4%B8%AAjson%E7%BB%93%E6%9E%84%E4%B8%AD%EF%BC%8C%E5%A6%82-a-%E2%80%991%E2%80%B2-b-%E2%80%992%E2%80%B2-c-%E2%80%9D-d-%E2%80%99xxx%E2%80%99-e-undefined-%E3%80%82"><span class="toc-number">1.39.</span> <span class="toc-text">39.	有这样一个URL：http:&#x2F;&#x2F;item.taobao.com&#x2F;item.htm?a&#x3D;1&amp;b&#x3D;2&amp;c&#x3D;&amp;d&#x3D;xxx&amp;e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0var-reg-new-RegExp-%E2%80%9Cxxx%E2%80%9D-%E4%B8%8E%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%AD%97%E9%9D%A2%E9%87%8Fvar-reg-%E6%9C%89%E4%BB%80%E4%B9%88%E4%B8%8D%E5%90%8C%EF%BC%9F%E5%8C%B9%E9%85%8D%E9%82%AE%E7%AE%B1%E7%9A%84%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%9F"><span class="toc-number">1.40.</span> <span class="toc-text">40.	正则表达式构造函数var reg&#x3D;new RegExp(“xxx”)与正则表达字面量var reg&#x3D;&#x2F;&#x2F;有什么不同？匹配邮箱的正则表达式？</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/5a9e107b/" title="11.性能优化"><img src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230722213120050.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="11.性能优化"/></a><div class="content"><a class="title" href="/posts/5a9e107b/" title="11.性能优化">11.性能优化</a><time datetime="2023-10-18T13:51:52.000Z" title="发表于 2023-10-18 21:51:52">2023-10-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/467cee4/" title="流形与非流行"><img src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230708214917843.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="流形与非流行"/></a><div class="content"><a class="title" href="/posts/467cee4/" title="流形与非流行">流形与非流行</a><time datetime="2023-07-08T13:45:31.000Z" title="发表于 2023-07-08 21:45:31">2023-07-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/f43726f7/" title="详解@RequestParam"><img src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/Java-Logo.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="详解@RequestParam"/></a><div class="content"><a class="title" href="/posts/f43726f7/" title="详解@RequestParam">详解@RequestParam</a><time datetime="2023-07-04T02:07:55.000Z" title="发表于 2023-07-04 10:07:55">2023-07-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/a98e3ede/" title="Cesium面试题"><img src= "" data-lazy-src="/img/category_img.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Cesium面试题"/></a><div class="content"><a class="title" href="/posts/a98e3ede/" title="Cesium面试题">Cesium面试题</a><time datetime="2023-07-03T06:07:01.000Z" title="发表于 2023-07-03 14:07:01">2023-07-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/d594835b/" title="Linux项目部署详细步骤"><img src= "" data-lazy-src="http://rx6zk4j2b.hn-bkt.clouddn.com/blogs/image-20230709192449145.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Linux项目部署详细步骤"/></a><div class="content"><a class="title" href="/posts/d594835b/" title="Linux项目部署详细步骤">Linux项目部署详细步骤</a><time datetime="2023-05-09T11:08:33.000Z" title="发表于 2023-05-09 19:08:33">2023-05-09</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By GISer</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"><script>function loadLivere () {
  if (typeof LivereTower === 'object') {
    window.LivereTower.init()
  }
  else {
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
    })(document, 'script');
  }
}

if ('Livere' === 'Livere' || !true) {
  if (true) btf.loadComment(document.getElementById('lv-container'), loadLivere)
  else loadLivere()
}
else {
  function loadOtherComment () {
    loadLivere()
  }
}</script></div><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-show-text.min.js" data-mobile="false" data-text="富强,民主,文明,和谐,平等,公正,法治,爱国,敬业,诚信,友善" data-fontsize="15px" data-random="false" async="async"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":150,"height":300,"hOffset":-15,"vOffset":-15},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body></html>